<template>
    <div class="container">
        <div class="main">
            <el-input v-model="searchName" style="width: 240px" placeholder="输入名称" clearable :prefix-icon="Search"
                @keyup.enter.native="search" />
            <div class="searchRes">
                <div class="resItem" v-for="(item, index) in showList" :key="index">
                    <div class="itemTitle" @click="openWindow(item)">
                        <span class="name">{{ item.name.replace('.md','') }}</span>
                        <span class="time">{{ item.time }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
import { Search } from '@element-plus/icons-vue';
const searchName = ref('')
const menuList = ref([])
const showList = ref([])
onMounted(() => {
    window.electron.ipcRenderer.send('getNotesList', JSON.stringify({}));
    window.electron.ipcRenderer.on('returnNotesList', (event, data) => {
        menuList.value = JSON.parse(data)
        showList.value = menuList.value.sort((a, b) => {
            return new Date(b.time).getTime() - new Date(a.time).getTime()
        })
    })
})
const openWindow = (item) => {
    console.log('openWindow', item);
    window.electron.ipcRenderer.send('openWindow', 'notes');
    localStorage.setItem('noteDetail', JSON.stringify(item));

}
const search = () => {
    if(searchName.value == ''){
        showList.value = menuList.value
    }else{
        showList.value = menuList.value.filter(item => {
            return item.name.indexOf(searchName.value) != -1
        })
    }
}
</script>

<style lang="less" scoped>
.container {
    width: 100vw;
    height: 100vh;
    padding: 10px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    // border: 1px solid #333;
    color: #333;
    background-color: #fff;
    opacity: 0.9;

    .main {
        width: 100%;
        height: 92%;
        -webkit-app-region: no-drag;
        overflow-y: scroll;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE 10+ */

        &::-webkit-scrollbar {
            display: none;
        }

        .el-input {
            width: 100% !important;

            :deep(.el-input__wrapper) {
                background: none !important;
                color: #333 !important;

                .el-input__prefix {
                    color: #333;
                }
            }
        }

        .searchRes {
            display: flex;
            flex-direction: column;
            width: 100%;

            .resItem {
                width: 100%;
                height: 30px;
                margin-top: 5px;
                font-size: 13px;
                display: flex;

                .itemTitle {
                    // 单行超出省略
                    // overflow: hidden;
                    // text-overflow: ellipsis;
                    // white-space: nowrap;
                    width: 100%;
                    height: 100%;
                    padding: 0 5px;
                    line-height: 30px;
                    cursor: pointer;
                    border: 1px solid #333;
                    border-radius: 5px;
                    transition: .3s;
                    display: flex;
                    justify-content: space-between;

                    &:hover {
                        background-color: #333;
                        color: #fff;
                    }
                    .time{
                        width: 120px;
                    }
                    .name{
                        flex: 1;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
            }
        }
    }
}
</style>